
.weixin-page {
	height: 100vh;
	background: #F0F0F0;
	img {
		display: block;
		width: 100%;
	}
}


.t-form {
	padding: 30px 10px 30px 10px;
	.project-title {
		margin-bottom: 30px;
		input {
			font-size: 16px;
			text-align: center;
		}
	}
	.project-total {
		font-size: 16px;
		font-weight: 600;
		border: 1px solid #EBEEF5;
		border-top: none;
		line-height: 50px;
		padding: 0 10px;
	}
}
.page-handle {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 15px 30px 5px;
	border-top: 1px solid #EBEEF5;
	.btn {
		margin: 0 5px 10px;
		padding: 10px 10px;
		width: 110px;
	}
}

.type-list {
	border: 1px solid #EBEEF5;
	border-bottom: none;
	.el-collapse-item__header {
		padding-left: 10px;
		font-size: 16px;
	}
	.el-collapse-item__content {
		padding-bottom: 0;
	}
	.coll-title {
		display: flex;
		align-items: center;
		gap: 10px;
		.el-input {
			width: 160px;
			input {
				padding: 0 10px;
				height: 36px;
				line-height: 36px;
			}
		}
		.total {
			line-height: 18px;
			font-size: 12px;
			color: #666;
		}
	}
	.content-box {
		border-top: 1px solid #EBEEF5;
		padding: 20px 10px 15px;
	}
	.handle-box {
		padding: 5px 10px;
		border-top: 1px solid #EBEEF5;
		text-align: right;
	}
}

.calc-lsit {
	.no {
		display: inline-block;
		background: rgba(103,194,58,0.2);
		padding: 0 5px;
		border-radius: 10px;
		line-height: 20px;		
		font-size: 12px;
		text-align: center;
		min-width: 20px;
	}
	.show-item {
		&+.show-item {
			margin-top: 10px;
		}
		.title {
			display: flex;
			align-items: center;
			font-size: 16px;
			gap: 10px;
		}
		.row {
			display: flex;
			align-items: center;
			font-size: 15px;
			.label {
				color: #999;
			}
			.value {
				flex: 1;
				width: 0;
			}
		}
		.deduct-box {
			padding-left: 10px;
			.name {
				color: #999;
			}
			.list {
				position: relative;
				padding-left: 10px;
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 4px;
					bottom: 4px;
					width: 2px;
					background: #ddd;
				}
			}
		}
	}
	.edit-item {
		.formula-list {
			margin-bottom: 10px;
			display: flex;
			gap: 10px;
			.item {
				border: 1px solid #DCDFE6;
				padding: 3px 10px;
				border-radius: 5px;
				line-height: 16px;
				cursor: pointer;
				&.active {
					border-color: #409eff;
					background-color: #409eff;
					color: #ffffff;
				}
			}
		}
		.input-box {
			display: flex;
			margin-bottom: 10px;
			.label {
				width: 70px;
				border: 1px solid #DCDFE6;
				border-right: none;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F5F7FA;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
			}
			.value {
				flex: 1;
				width: 0;
				input {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
				}
			}
		}
		// -- 键盘
		.keyboard-box {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 20px;
			.item {
				width: 28px;
				line-height: 24px;
				text-align: center;
				background: #F5F7FA;
				cursor: pointer;
			}
		}
		// -- 扣减
		.deduct-box {
			.btn-box {
				display: flex;
				margin-bottom: 10px;
				gap: 10px;
				.item {
					border: 1px solid #DCDFE6;
					padding: 2px 5px;
					border-radius: 5px;
					line-height: 16px;
					cursor: pointer;
				}
			}
			.list {
				border: 1px solid #DCDFE6;
				margin-bottom: 20px;
				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					&+.item {
						border-top: 1px solid #DCDFE6;
					}
					.sort {
						width: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #999;
					}
					.content {
						flex: 1;
						width: 0;
						border-left: 1px solid #DCDFE6;
						border-right: 1px solid #DCDFE6;
						padding: 10px;
						.input-box {
							&:last-child {
								margin-bottom: 0;
							}
							.label {
								width: 56px;
								color: #999;
							}
						}
						.el-input--small {
							height: 26px;
							.el-input__inner {
								height: 26px;
								line-height: 26px;
							}
							input {
								display: block;
							}
						}
					}
					.handle {
						width: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						i {
							font-size: 20px;
							color: #F56C6C;
						}
					}
					
				}
			}
		}
	}
}


// --------------保存图片----------------------
.save-image-box {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	// z-index: 1;
	width: 0;
	height: 0;
	z-index: -100;
	opacity: 0;
	.image-wrapper {
		width: 1300px;
		background: #fff;
		padding: 50px;
		.form {
			> .title {
				margin-bottom: 40px;
				font-size: 40px;
				text-align: center;
			}
			.type {
				margin-bottom: 40px;
				> .title {
					margin-bottom: 20px;
					font-size: 36px;
					display: flex;
					align-items: center;
					.type-total {
						margin-left: 40px;
						font-size: 28px;
						color: #999;
					}
				}
				.cost {
					padding-left: 60px;
					font-size: 32px;
					.cost-item {
						margin-bottom: 20px;
						.deduct-box {
							padding-left: 20px;
							color: #999;
							.list {
								position: relative;
								padding-left: 20px;
								&:before {
									content: '';
									position: absolute;
									left: 0;
									top: 8px;
									bottom: 8px;
									width: 4px;
									background: #ddd;
								}
							}
						}
					}
				}
			}
			.project-total {
				margin-top: 50px;
				text-align: right;
				.num {
					margin-bottom: 10px;
					font-size: 40px;
					span {
						font-weight: 600;
					}
				}
				.time {
					color: #999;
					font-size: 30px;
				}
			}
		}
	}
}


// --------------弹窗--------------------------
.t-dialog {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: all .3s;
	&.show {
		opacity: 1;
	}
	.t-content {
		background: #fff;
		box-shadow: 0 0 12px 0 rgba(0,0,0,.1);
		border-radius: 10px;
		overflow: hidden;
		width: 300px;
		text-align: center;
		.title {
			height: 40px;
			border-bottom: 1px solid #fafafa;
			font-size: 16px;
			color: #000;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 15px;
		}
		.message {
			padding: 20px 15px;
			line-height: 24px;
			color: #333;
		}
		.handle {
			border-top: 1px solid #fafafa;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn {
				width: 50%;
				line-height: 40px;
				color: #999;
				cursor: pointer;
				box-sizing: border-box;
				&.ok {
					color: #409EFF;
					border-left: 1px solid #fafafa;
				}
			}
		}
	}
}


// ------------------------
.el-message {
	min-width: 300px;
}







